/**
 * Created by luyon on 2017/8/23.
 */

"use strict";


import React from "react" ;
import NetworkEngine from "../../../../../utils/NetworkEngine" ;
import UrlManager from "../../../../../utils/UrlManager" ;
import {browserHistory} from 'react-router';
// import V from "../../../../../static/img/film/geren-V.png";
// import qiteV from "../../../../../static/img/film/qite-V.png";
import sjt from "../../../../../static/img/film/sjt.png"
import xjt from "../../../../../static/img/film/xjt.png"
import V from "../../../../../static/img/h5/V-geren.png";
import qiyeV from "../../../../../static/img/h5/V-qiye.png";
import tx from "../../../../../static/img/film/moren-tx.png";

import FilmCommentHuifu from "./FilmCommentHuifu"

class FilmCommentOneContainer extends React.Component {
    constructor(p) {
        super(p);
        this.state = {
            huifu: [],
            time: "",
            arrow: "close",
            upArrow: "",
            downArrow: "none",
            modelId: "",
            userId: "",
            otherUserId: ""
        }
        this.replyReply = this.replyReply.bind(this)
        this.getNewReply = this.getNewReply.bind(this)
    }

    componentWillMount() {
        // this.getHuifu();
        // let newTime = this.props.time.substring(0, this.props.time.indexOf("."));
        // let model = this.props.userId;
        // this.setState({
        //     time: newTime,
        //     modelId:model
        // });
        // let tem = sessionStorage.getItem("id");
        // if(sessionStorage.getItem("id")!=null){
        //     tem = tem.substring(tem.length-32,tem.length);
        // }
        // let otherUserId = this.props.userId;
        // otherUserId = otherUserId.substring(otherUserId.length-32,otherUserId.length);
        // this.setState({
        //     time: newTime,
        //     userId:tem,
        //     otherUserId:otherUserId
        // })
    }

    //删除和回复弹框显示
    showModal() {
        let id = "#com_" + this.props.id
        $(id).show();
        $(".closeModal").click(function () {
            $(".footer-up").hide();
        })
    }

    getNewReply() {
        // this.getHuifu();
        this.props.getNewCommentList();

    }

    getHuifu() {
        // let urlManager = new UrlManager();
        // NetworkEngine(
        //     "get",
        //     urlManager.commentByOne() + `/${this.props.id}`,
        // ).then(
        //     data => {
        //         let _data = data.data.data;
        //
        //         this.setState({
        //             huifu: _data,
        //             arrow: "open",
        //             upArrow:"none",
        //             downArrow:"",
        //         });
        //     }
        // ).catch(
        //     err => {
        //
        //     }
        // )
    }

    // closeReplyDetail(e) {
    //     this.setState({
    //         arrow: "close",
    //         huifu: [],
    //         upArrow:"",
    //         downArrow:"none",
    //     });
    //
    // }

    deleteComment() {
        sessionStorage.setItem("deleteStatus", "pinglun");
        sessionStorage.setItem("deleteId", this.props.id);
        // $("#cancel_model").show()
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.deleteComment(), {
                "commentId": this.props.id,
                "userId": sessionStorage.getItem("id"),
                userKeyId: sessionStorage.getItem("userKeyId"),
            },
        ).then(
            data => {
                $(".footer-up").hide();
                if (data.data.status == "0") {
                    this.fresh();

                }
            }
        ).catch(
            err => {

            }
        )
    }

    //进入个人主页
    queryCreator() {
        localStorage.setItem("personalId", this.props.userId)
        var id =this.props.userId;
        id = id.replace(/\//g, '_');
        var viewerKey = sessionStorage.getItem("viewerKey");
        if(viewerKey == null || viewerKey == ""){
            viewerKey = "0";
        }
        browserHistory.push("/App/MobileMine/" + id+"/"+viewerKey);
        window.scrollTo(0, 0);
    }


    fresh() {
        return this.props.getNewCommentList();

    }

    //存入数据
    setSomeValue() {
        $(".footer-up").hide();

        return this.props.transmit(this.props.userId, this.props.id, this.props.nickName)
    }

    replyReply(userId, commentId, nickName) {
        return this.props.transmit(userId, commentId, nickName)

    }

    render() {
        let r = this.props.replyListData;

        var content = {
            __html:this.props.content
        };

        let Logo = () => {
            if (this.props.status == 1) {
                if (this.props.type == "0") {
                    return <img src={V} alt="图标"/>
                } else {
                    return <img src={qiyeV} alt="图标"/>
                }
            } else {
                return <span></span>

            }

        };

        let HuiFuBtn = () => {
            if (this.props.num === 0) {
                return (
                    <span style={{display: "none"}}></span>
                )
            } else {
                return (
                    <span className="p-2" style={{display: "none"}}>
                        <a>
                            {this.props.num}条回复
                            {/*{*/}
                            {/*this.state.arrow == "close" ?*/}
                                <img src={sjt} className="open_huifu" id={this.props.id} onClick={this.getHuifu.bind(this)} style={{cursor: "pointer"}}
                                alt="上箭头"/> :
                            {/*<img src={xjt} onClick={this.closeReplyDetail.bind(this)} alt="下箭头"/>*/}
                                // }
                            {/*<img src={sjt} id={this.props.id} className={this.state.upArrow} onClick={this.getHuifu.bind(this)} style={{cursor: "pointer"}}*/}
                            {/*alt="上箭头"/>*/}
                            {/*<img src={xjt} onClick={this.closeReplyDetail.bind(this)} className={this.state.downArrow} alt="下箭头"/>*/}
                        </a>
                    </span>
                )
            }
        };
        return (
            <div>
                <div className="video-comments">
                    <div className="player-writer clearfix">
                        <div className="writer-img">
                            <img src={this.props.headUrl ? this.props.headUrl : tx} alt="作者头像"
                                 onClick={this.queryCreator.bind(this)}/>
                        </div>
                        <ul className="writer-text">
                            <li className="text1">
                                {this.props.nickName}
                                <Logo/>
                                <span>{this.props.time}</span>
                            </li>
                            {/*<li className="text3">{this.props.content}</li>*/}
                            {
                                sessionStorage.getItem("id")
                                    ?
                                    <li className="text3" onClick={this.showModal.bind(this)} dangerouslySetInnerHTML={content}></li>
                                    :
                                    <li className="text3" dangerouslySetInnerHTML={content}></li>
                            }
                            <div className="footer-up" id={"com_" + this.props.id}>
                                <div className="p-parent">
                                    <p>  {
                                        this.props.session == "" || this.props.session == null ? <span></span> : <span>
                                {this.props.session == this.props.userId ?
                                    <a onClick={this.deleteComment.bind(this)}>删除</a> :
                                    <a ref="focus" onClick={this.setSomeValue.bind(this)}>回复</a>}
                                        </span>}   </p>

                                    <p className="closeModal">取消</p>
                                </div>
                            </div>
                            <li>
                                <HuiFuBtn/>
                            </li>
                        </ul>
                    </div>

                    {/*回复*/}
                    {
                        r.data.map((data, i) => {
                            return <span key={i}>{this.props.id == data.commentId ?
                                <span>
                                    {
                                        data.list.map((data, a) => {
                                            return <FilmCommentHuifu
                                                key={a}
                                                replyUserName={data.replyUserName}            //回复人
                                                headUrl={data.headUrl}          //回复人的头像
                                                beReplyUserName={data.beReplyUserName}            //被回复人
                                                content={data.content}                  //回复内容
                                                time={data.time}                      //回复时间
                                                replyUserId={data.replyUserId}          //回复人Id
                                                commentId={data.commentId}              //commentId
                                                status={data.status}                  //认证状态 1是成功
                                                type={data.type}                        //认证类型
                                                session={sessionStorage.getItem("id")}

                                                id={data.id}//回复id
                                                replyReply={this.replyReply}
                                                getNewReply={this.getNewReply}
                                            />
                                        })
                                    }
                                </span> :
                                null}</span>
                        })
                    }
                </div>
            </div>
        )
    }
}

// const FilmCommentOne = connect()(FilmCommentOneContainer) ;

export {FilmCommentOneContainer as default} ;